<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>枕頭山-地圖列表頁</title>
<link href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet" type="text/css" />
<link href="jquery-mobile/jquery.mobile.theme-1.2.0.min.css" rel="stylesheet" type="text/css" />
<link href="jquery-mobile/jquery.mobile-1.2.0.min.css" rel="stylesheet"  type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.2.0.min.js"	type="text/javascript"></script>
<script src="cordova-2.1.0.js" type="text/javascript"></script>
<script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>

<style>
  #map_div {
	  padding-top:25%;
	  padding-bottom:5%;
	  position:absolute;
	  width:100%;
	  height:88%;
	  max-height:1600px;
  }
</style>

<script>
$(document).bind("mobileinit", function() {
	//宣告JQM全域屬性
	$.mobile.touchOverflowEnabled = true;
	$.mobile.allowCrossDomainPages = true;
	$.support.cors = true;
	$.mobile.phonegapNavigationEnabled = true;
});

    var curGeoPoint = { 'center': '25.0336,121.56482', 'zoom': 14 };

	

	$('#JalaMap').live('pageinit', function() {
				alert("basic_map")
					$('#map_canvas').gmap({'center': curGeoPoint.center, 'zoom': curGeoPoint.zoom, 'disableDefaultUI':true, 'callback': function() {
						var self = this;
						self.addMarker({'position': this.get('map').getCenter() }).click(function() {
							self.openInfoWindow({ 'content': 'Hello World!' }, this);
						});
					}}); 
				});
			
			
			$('#JalaMap').live('pageshow', function() {
				$('#map_canvas').gmap('refresh'); });
			


</script>

</head>
<body>
<div data-role="page" id="JalaMap" >
  <div data-role="header" data-position="fixed">
     <div data-role="navbar">
				<ul>
					<li><a  data-rel="back" data-icon="back">返回</a>
					<li><a  id="map" class="ui-btn-active">地圖</a>
					<li><a  id="listview" >列表</a>
                    <li><a  id="listview" >FB粉絲團</a>
				</ul>
	 </div>
  </div>
  <div data-role="content">
     <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
		<div id="map_canvas" style="height:350px;"></div>
	</div>

  </div>
</div>
     
</body>
</html>
